<template>
  <keep-alive :include="include">
    <router-view id="app" v-if="isRouterAlive" />
  </keep-alive>
</template>
<script>
import { isPhoneType,getUrlParams } from '@/utils/utils'
import Vue from 'vue';
export default {
  computed: {
    include () {
      return this.$store.state.include
    }
  },
  provide () {  // 在祖先组件中通过 provide 提供变量
    return {
      reload: this.reload  //  声明一个变量
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  created () {
    // const { strSid,statusBarHieght } = getUrlParams();
    const { strSid } = getUrlParams();
    if (strSid) {
      localStorage.setItem('strSid', decodeURIComponent(strSid));
    }
    //根据项目要求进行适配手机状态栏2种适配方案 1、通过app传入状态栏高度进行适配2、通过样式前端进行适配默认通过样式进行适配
    // if (statusBarHieght) {
    //   localStorage.setItem('statusBarHieght', decodeURIComponent(statusBarHieght));
    //   document.getElementsByTagName('html')[0].style.paddingTop = `${statusBarHieght}px`
    // }
    // 给html 添加class区分手机类型 
    if (isPhoneType().type == 'Android') {
      if (isPhoneType().isFullScreen) {
        console.info('全面屏安卓手机');
        Vue.prototype.$isPhoneType = 'android--fullScreen'
        document.documentElement.setAttribute(
          'system',
          'android--fullScreen'
        );
      } else {
        document.documentElement.setAttribute(
          'system',
          'android--nofullScreen'
        );
      }
    }

  },
  methods: {
    // provide中声明的变量
    reload () {
      // 通过 this.isRouterAlive 控制 router-view 达到刷新效果
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}
</script>
<style lang='scss'>
html[system='android--fullScreen'] .van-nav-bar {
  padding-top: 25px;
}
</style>